myApp.views.ImageGallery = Ext.extend(Ext.Panel,{

    layout: {
        type: 'fit'
    },

    initComponent: function() {

        this.setLoading(true,true);

        var proxyUrl = 'my_url'

        var store = new Ext.data.Store({
            panel: this,
            model: 'myModel',
            proxy: {
                type: 'ajax',
                url: proxyUrl,
                reader: {
                    type: 'json'
                }
            },
            listeners: {
                single: true,
                datachanged: function(){
                    var items = [];
                    store.each(function(rec){
                        items.push({
                            html: '<img class="myImage" src=' + rec.get('imageUrl') + '>'
                        });
                    });

                    var carousel = new Ext.Carousel({
                        cardSwitchAnimation: 'slide',
                        layoutOnOrientationChange: true,
                        ui: 'light',
                        items: items,
                        style: 'background: #000',
                        itemId: 'carousel'


                    });

                    this.panel.setLoading(false);
                    this.panel.add(carousel);

                    this.panel.doLayout();
                }

            }



        });
        store.read();
        myApp.views.ImageGallery.superclass.initComponent.call(this);
    }});